<template>
	<view class="page">
		<u-navbar title="检查设备" border @leftClick="$utils.back()" placeholder>
		</u-navbar>
		<!-- 查询设备信息中间状态 -->
		<view class="query-device-info-container" v-if="pageStatus === 0">
			<view class="query-device-info-title">
				添加设备
			</view>
			<view class="query-device-info-loading">
				<view class="query-device-info-loading-sketch">
					<image class="pic" src="@/camera/static/image/search.png" />
					<view class="tip">正在查询设备信息，请稍后</view>
				</view>
			</view>
		</view>

		<!-- 查询设备信息网络错误 && 查询信息失败 -->
		<view class="query-device-info-container" v-if="pageStatus == -1 || pageStatus == 2">
			<view class="query-device-info-title">
				<text v-if="pageStatus == -1">添加设备</text>
				<text v-if="pageStatus == 2">设备查询失败</text>
			</view>
			<view class="query-device-info-fail">
				<view class="query-device-info-fail-sketch">
					<image class="pic" src="@/camera/static/image/fail.png" />
					<view class="tip" v-if="pageStatus == -1">无法连接到服务器</view>
					<view class="tip" v-if="pageStatus == 2">未能查询到设备哦!</view>
				</view>
			</view>
			<view class="query-device-info-footer">
				<u-button size="large" type="info" v-if="pageStatus == -1" @click="tryAgain">重试</u-button>
				<u-button size="large" type="info" v-if="pageStatus == 2" @click="backToPage">重试</u-button>
			</view>

		</view>

		<!-- 设备信息确认 -->
		<view class="query-device-info-container" v-if="pageStatus == 1">
			<view class="query-device-info-title">
				设备确认
			</view>
			<view class="query-device-info-check">
				<view class="query-device-info-check-sketch">
					<image class="pic" src="@/camera/static/image/deviceCheck.png" />
					<view class="title" v-if="deviceName">{{deviceName}}</view>
					<view class="title" v-else>
						<text>{{deviceSerial}}</text>
					</view>
					<view class="subtitle" v-if="deviceOwner == 2">设备已经被别人添加</view>
					<view class="subtitle" v-if="deviceOwner == 1">设备已经添加</view>
				</view>
			</view>
			<view class="query-device-info-footer">
				<view class="tip" v-if="deviceOwner == 0 && deviceStatus == 0">
					<u-checkbox-group v-model="tipChecked" @change="onChange">
						<u-checkbox :customStyle="{marginBottom: '8px'}" label="设备已通电" name="设备已通电">
						</u-checkbox>
					</u-checkbox-group>
					<view class="tooltip" v-if="tipShow == true">请先勾选设备状态才可进行下一步操作</view>
				</view>

				<!-- 进入配网  未被添加不在线线   -->
				<u-button size="large" type="info" v-if="deviceOwner == 0 && deviceStatus == 0"
					@click="gotoConnectWifi">
					下一步
				</u-button>

				<!-- 进入配网  未被添加但在线   -->
				<u-button size="large" type="info" v-if="deviceOwner == 0 && deviceStatus == 1"
					@click="gotoDeviceNameUpdate">
					下一步
				</u-button>

				<!-- 需要判断是否在线，在线完成/不在线跳转至重置wifi -->
				<u-button size="large" type="info" v-if="deviceOwner == 1" @click="checkWifi">
					下一步
				</u-button>
				<!-- 别人添加 -->
				<view class="des" v-if="deviceOwner == 2">
					<view>
						1. 若变更账号可用原账号进行<text class="bold">转移设备</text>操作，或<text class="bold">删除设备</text>后重新添加
					</view>
					<view>2. 若这不是你的设备，可以让主人<text class="bold">分享设备</text></view>
				</view>
				<u-button size="large" type="info" v-if="deviceOwner == 2" @click="completeConnectWifi">
					完成
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		EConnectWifi
	} from './ez-wechat-connectwifi-sdk/index';
	export default {
		data() {
			return {
				accessToken: '',
				camera: {},
				pageStatus: 0, // -1-网络失败，0-查询中，1-设备信息，2-设备查询失败
				deviceSerial: '', // 设备序列号
				deviceName: '', // 设备名称
				deviceStatus: 1, // 默认设备在线
				deviceOwner: 0, // 0-表示未被添加，1-被自己添加， 2-被别人添加
				tipChecked: false, // 
				tipShow: false,
				timer: null,
				times: 0, // 悬浮弹窗显示次数，显示完一次不再显示
			}
		},
		onLoad() {
			this.accessToken = uni.getStorageSync('accessToken')
			this.camera = uni.getStorageSync('camera')
			this.deviceSerial = this.camera.deviceSerial
			this.queryDevice()
		},
		methods: {
			queryDevice() {
				const accessToken = this.accessToken
				const deviceSerial = this.camera.deviceSerial
				const eConnectWifi = EConnectWifi();
				eConnectWifi.searchDeviceInfo(accessToken, deviceSerial).then(res => {
					console.log(res && res.result)
					if (res && res.result) {
						const result = res.result;
						if (result.code == 200) {
							this.deviceOwner = 0
							this.pageStatus = 1
							this.deviceStatus = 1
						} else if (result.code == "20013") {
          // 被别人添加
							this.deviceOwner = 2
							this.pageStatus = 1
						} else if (result.code == "20020" || result.code == "20029") {
							// 被自己添加
							const deviceName = result.data.displayName;
							const model = result.data.model;
							const status = result.data.status;
							this.deviceStatus = status
							this.deviceName = deviceName
							this.deviceOwner = 1
							this.pageStatus = 1
						} else if (result.code == "20023" || result.code == "20002") {
							// 设备不在线，未被浏览用户添加

							this.deviceStatus = 0
							this.deviceOwner = 0
							this.pageStatus = 1
						} else {
							this.pageStatus = 2
						}
					} else {
						this.pageStatus = 2
					}
				}).catch(err => {
					this.pageStatus = -1
				})
			},
			// 
			onChange(e) {
				this.tipChecked = e.detail
			},

			// 重试
			tryAgain() {
				this.queryDevice(this.deviceSerial);
			},

			// 
			gotoConnectWifi() {
				console.log('进入配网  未被添加不在线线')
				// 前往配网页
				if (!this.tipChecked) {
					if (this.times === 0) {
						this.tipHidden();
						this.tipShow = true
					}
				} else {
					// 前往配网流程
					this.$utils.navigateTo({
						url: '/camera/deviceInit',
					})
				}
			},

			checkWifi() {
				console.log(' 需要判断是否在线，在线完成/不在线跳转至重置wifi')
				if (this.deviceStatus == 1) {
					// 跳转至配置完成页
					this.$utils.navigateTo({
						url: '/packageD/pages/configWifiStatusPage/index?status=success',
					})
				} else {
					// 跳转至重置wifi页面
					this.$utils.navigateTo({
						url: '/packageD/pages/deviceReset/index',
					})
				}
			},

			// 在线未被添加
			gotoDeviceNameUpdate() {
				console.log('进入配网  未被添加但在线')
				this.$utils.navigateTo({
					url: '/packageD/pages/deviceReset/index',
				})
			},

			completeConnectWifi() {
				uni.reLaunch({
					url: '/camera/index',
				})
			},

			// 三秒后弹窗消失
			tipHidden() {
				const timer = setTimeout(() => {
					this.tipShow = false
					clearTimeout(timer);
					this.timer = null
				}, 3000);
				this.timer = timer,
					this.times = 1
			},

			backToPage() {
				this.$utils.back()
			},
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0rpx 20rpx;
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.query-device-info-container {
		height: 100vh;
		box-sizing: border-box;
		padding: 16px 16px 50px;
		position: relative;
	}

	.query-device-info-container .query-device-info-title {
		font-size: 22px;
		color: #222222;
		text-align: center;
		line-height: 22px;
		font-weight: 500;
	}

	.query-device-info-container .query-device-info-loading {
		margin-top: 60px;
	}

	.query-device-info-loading-sketch .pic {
		display: block;
		width: 290px;
		height: 290px;
		margin: 0 auto;
	}

	.query-device-info-loading-sketch .tip {
		margin-top: 73px;
		font-size: 14px;
		color: #222222;
		text-align: center;
		line-height: 14px;
		font-weight: 400;
	}

	.query-device-info-container .query-device-info-fail {
		margin-top: 96px;
	}

	.query-device-info-fail-sketch .pic {
		display: block;
		width: 90px;
		height: 90px;
		margin: 0 auto;
	}

	.query-device-info-fail-sketch .tip {
		margin-top: 24px;
		font-size: 14px;
		color: #222222;
		text-align: center;
		line-height: 14px;
		font-weight: 400;
	}

	.query-device-info-container .query-device-info-check {
		margin-top: 24px;
	}

	.query-device-info-check-sketch .pic {
		width: 100%;
		height: 440rpx;
		display: block;
		border-radius: 8px;
		background-color: #F1F1F1;
	}

	.query-device-info-check-sketch .title {
		margin-top: 32px;
		font-size: 16px;
		color: #222222;
		text-align: center;

		line-height: 16px;
		font-weight: 400;
	}

	.query-device-info-check-sketch .subtitle {
		margin-top: 8px;
		font-size: 12px;
		color: #666666;
		text-align: center;
		line-height: 12px;
		font-weight: 400;
	}

	.query-device-info-container .query-device-info-footer {
		position: absolute;
		bottom: 50px;
		left: 16px;
		right: 16px;
	}

	.query-device-info-container .query-device-info-footer .tip {
		font-size: 14px;
		color: #666666;
		line-height: 14px;
		font-weight: 400;
		margin-bottom: 16px;
		position: relative;
	}

	.query-device-info-container .query-device-info-footer .tip .tooltip {
		position: absolute;
		bottom: 34px;
		left: -12px;
		background: rgba(0, 0, 0, 0.80);
		border-radius: 8px;
		padding: 13px 16px;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 14px;
		font-weight: 400;
	}

	.query-device-info-container .query-device-info-footer .tip .tooltip::before {
		content: '';
		display: block;
		position: absolute;
		bottom: -6px;
		left: 16px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid rgba(0, 0, 0, 0.80);
	}


	.query-device-info-container .query-device-info-footer .des {
		font-size: 16px;
		color: #666666;
		line-height: 24px;
		font-weight: 400;
		margin-bottom: 16px;
	}

	.query-device-info-container .query-device-info-footer .des .bold {
		font-weight: 600;
	}
</style>